import 'package:auto_route/annotations.dart';
import 'package:flutter/material.dart';
import 'package:flutter_html/flutter_html.dart';
import 'package:flutter_html_table/flutter_html_table.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:html/parser.dart';
import 'package:linux_do/service/NetworkService.dart';
import 'package:linux_do/service/RenderService.dart';

import 'package:html/dom.dart' as html;

@RoutePage()
class TopicContentPage extends StatefulWidget {
  final TopicData data;

  const TopicContentPage({required this.data, super.key});

  @override
  State<StatefulWidget> createState() {
    return TopicContentPageState();
  }
}

class TopicContentPageState extends State<TopicContentPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.transparent,
      body: FutureBuilder(
          future: NetworkService.instance.topicDetail(id: widget.data.id),
          builder: (BuildContext context, AsyncSnapshot<String> snapshot) {
            if (snapshot.connectionState == ConnectionState.done) {
              if (snapshot.hasData) {
                var st = snapshot.data!;

                // var doc = parse(st);
                // var cc = doc.querySelector('div.cooked');
                // var w = buildInput(doc.outerHtml);
                return Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: SingleChildScrollView(
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      spacing: 10,
                      children: [
                        TextButton(
                            onPressed: () {
                              Navigator.of(context).pop();
                            },
                            child: const Icon(Icons.arrow_back_outlined)),
                        Container(
                          decoration: BoxDecoration(
                            color: Colors.transparent,
                          ),
                          child: Wrap(
                            spacing: 10,
                            children: widget.data.tags.map((e) {
                              return Text(
                                e,
                                style: TextStyle(
                                  backgroundColor: Colors.pink,
                                  foreground: Paint()..color = Colors.white,
                                ),
                              );
                            }).toList(),
                          ),
                        ),
                        // Center(child: Text.rich(w)),
                        Center(
                          child: Html(
                            extensions: [
                              const TableHtmlExtension(),
                              OnImageTapExtension(onImageTap: (String? url,
                                  Map<String, String> attributes,
                                  html.Element? element) {
                                print(1);
                              })
                            ],
                            onLinkTap: (String? a, Map<String, String> m,
                                html.Element? c) {
                              print('a=$a,m=$m,c=${c?.outerHtml}');
                            },
                            data: st,
                            style: {
                              "body": Style(
                                padding: HtmlPaddings.zero,
                              ),
                              "p": Style(
                                margin: Margins.only(bottom: 4.w),
                              ),
                              "h1": Style(
                                margin: Margins.only(bottom: 14.w),
                                fontSize: FontSize(18.sp),
                                fontWeight: FontWeight.w600,
                                color: Theme.of(context).primaryColor,
                              ),
                              "h2": Style(
                                margin: Margins.only(top: 18.w, bottom: 4.w),
                                fontWeight: FontWeight.w500,
                                color: Theme.of(context).primaryColor,
                              ),
                              "h3": Style(
                                margin: Margins.only(top: 16.w, bottom: 4.w),
                                fontWeight: FontWeight.w500,
                                color: Theme.of(context).primaryColor,
                              ),
                              "h4": Style(
                                margin: Margins.only(top: 16.w, bottom: 4.w),
                                fontWeight: FontWeight.w500,
                                color: Theme.of(context).primaryColor,
                              ),
                              "a": Style(
                                margin: Margins.only(top: 16.w, bottom: 4.w),
                                fontWeight: FontWeight.w500,
                                color: Theme.of(context).primaryColor,
                              ),
                              "pre": Style(
                                display: Display.listItem,
                                backgroundColor: Colors.red,
                                margin: Margins.only(bottom: 4.w),
                                padding: HtmlPaddings.only(left: 16.w),
                                listStyleType: ListStyleType.arabicIndic,
                              ),
                              "ul": Style(
                                margin: Margins.only(bottom: 4.w),
                                padding: HtmlPaddings.only(left: 16.w),
                                listStyleType: ListStyleType.armenian,
                              ),
                              "li": Style(
                                margin: Margins.only(bottom: 2.w),
                                listStyleType: ListStyleType.persian,
                              ),
                            },
                          ),
                        )
                      ],
                    ),
                  ),
                );
              } else {
                return const Text.rich(TextSpan());
              }
            } else {
              return Container(
                height: 200,
                width: 200,
                color: Colors.red,
              );
            }
          }),
    );
  }
}
